import { type PropsOf } from '@builder.io/qwik';
import { cn } from '../cn';
import { cond, T, always } from 'rambda';

type InputProps = PropsOf<'input'> & {
  block?: boolean;
  sizing?: 'sm' | 'base' | 'lg' | undefined;
};

const btnSizeClasses: (size?: 'sm' | 'base' | 'lg' | undefined) => string = cond([
  [(s) => s === 'sm', always('px-2 py-1 rounded    text-sm')],
  [(s) => s === 'lg', always('px-6 py-3 rounded-md text-lg')],
  [T, /*************/ always('px-4 py-2 rounded-md text-base')],
]);

export default function Input(props: InputProps) {
  const { block, sizing } = props;

  const classes = cn(
    'text-kq-900 border border-kq-300 shadow-sm focus:ring-kq-500 focus:border-kq-600 focus:ring-2 focus:outline-none rounded-md',
    block && 'block w-full',
    btnSizeClasses(sizing),
    props.class
  );

  return <input {...props} class={classes} />;
}
